import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { observer } from 'mobx-react';

import { Input, Select, message } from 'antd';
import OperModal from '@/component/common/OperModal';
const LabelItem = OperModal.LabelItem;

import MModal from '@/component/common/MModal';

const Option = Select.Option;
import StoreListMini from '@/store/StoreListMini';

import ApiHelper from '@/store/ApiHelper';
import format from '@/tool/format';
import { add_account as api_add_account } from '@/constants/ApiTypes';
import adminType from '@/tool/adminType';

@observer class CreateBrokerModal extends Component {
    constructor(props) {
        super(props);
    }
    static propTypes = {
        visible: PropTypes.bool,
        onClose: PropTypes.func.isRequired
    };
    defaultState = {
        mobile: '',
        password: '',
        store_id: '',
        real_name: ''
    };
    state = this.defaultState;

    componentWillReceiveProps(nextProps) {
        if (nextProps.visible) {
            this.setState(this.defaultState);
        }
    }
    submit = async () => {
        const { mobile, password, store_id, real_name } = this.state;
        if (format.trim(mobile) == '') {
            this.input_mobile.focus();
            return message.warn('请输入手机号！', 1.5);
        }
        if (mobile.length < 11) {
            this.input_mobile.focus();
            return message.warn('请输入正确的11位手机号！', 1.5);
        }
        if (password == '') {
            this.input_password.focus();
            return message.warn('请输入密码！', 1.5);
        }
        if (password.length < 6) {
            this.input_password.refs.input.select();
            return message.warn('密码必须大于等于6位！', 1.5);
        }
        if (store_id == '' && adminType() == 1) {
            return message.warn('请选择门店！', 1.5);
        }
        if (format.trim(real_name) == '') {
            this.input_real_name.focus();
            return message.warn('请输入真实姓名！', 1.5);
        }

        const data = {
            account_type: 2,
            mobile,
            password,
            store_id,
            real_name
        };
        const result = await ApiHelper.requestPost(api_add_account, data);
        if (result.status) {
            MModal.success({ title: '操作成功', content: '操作成功', duration: 1.5 });
            this.props.onClose(true);
        } else {
            MModal.success({ title: '操作失败', content: result.info });
        }
    };
    inputOnchange = e => {
        this.setState({
            [e.target.name]: e.target.value
        });
    };
    selectStore = value => {
        this.setState({
            store_id: value
        });
    };
    render() {
        const { visible, onClose } = this.props;
        const { submit, inputOnchange, selectStore } = this;
        const LabelInput = name =>
            <Input name={name} ref={input => this[`input_${name}`] = input} value={this.state[name]} style={{ width: 200 }} onChange={inputOnchange} />;

        const storeListMini = StoreListMini.info;
        let storeOptionList = storeListMini.map((val, index) => {
            return <Option key={index} value={`${val.store_id}`}>{val.store_name}</Option>;
        });
        const isStore = adminType() == 2;
        return (
            <OperModal visible={visible} onClose={onClose} title="开通经纪人账号" width={330} height={!isStore ? 250 : 220} onOk={submit}>
                <LabelItem width={66} align="right" label="手机号">
                    {LabelInput('mobile')}
                </LabelItem>
                <LabelItem width={66} align="right" label="密码">
                    {LabelInput('password')}
                </LabelItem>
                {!isStore &&
                <LabelItem width={66} align="right" label="所属门店">
                    <Select placeholder="选择门店" style={{ width: 200 }} onChange={selectStore}>
                        {storeOptionList}
                    </Select>
                </LabelItem>}
                <LabelItem width={66} align="right" label="真实姓名">
                    {LabelInput('real_name')}
                </LabelItem>
            </OperModal>
        );
    }
}

export default CreateBrokerModal;